<template>
	<view class="page" :style="{ paddingTop:headBarInfo.navBarHeight+'px'}">
		<view class="header" :style="{ height:headBarInfo.navBarHeight+'px'}">

			<view
				:style="{height:headBarInfo.headBarContentHeight+'px',marginRight:headBarInfo.headBarContentRight+'px'}"
				class="head-bar-content-box">

				<image :style="{marginLeft:headBarInfo.menuRight + 'px'}" style="height: 32px;width: 32px;"
					@click="backClick" src="../../static/nav-bar-icon-back.png"></image>
				<input class="input-search" disabled="true" confirm-type="search" :placeholder="searchData.name"
					@focus="openLocationPicker" @click="openLocationPicker" />

			</view>
		</view>



		<!-- 推荐列表 -->
		<z-paging  :fixed="false" ref="paging" v-model="dataList"
			@query="queryList" :auto-show-back-to-top="true" :back-to-top-img="backToTopImg"
			:back-to-top-style="backToTopStyle">
			<view v-for="(item, index) in dataList" @click="clickToDetails(item)">
				<view class="list-head-box">
					<image style="height: 48px;width: 48px; border-radius: 50%;" :src="item.avatar" mode="widthFix">
					</image>
					<text class="list-title-text">
						{{item.nickname}}
					</text>
					<button class="list-focus-btn">
						关注
					</button>
				</view>
				<uni-swiper-dot :info="item.imageList" :current="swiperCurrent" mode="dot" :dots-styles="dotsStyles"
					field="content">
					<swiper v-if="item.imageList.length >0" style="margin-bottom: 8px;height: 558rpx;width: 100%;"
						@change="change" :current="swiperDotIndex">
						<swiper-item v-for="(imageListItem,index) in item.imageList">
							<view>
								<image style="width: 100%;background-color: white;height: 558rpx;" mode="aspectFill"
									:src="imageListItem"></image>
							</view>
						</swiper-item>
					</swiper>


					<view
						style="position: absolute;display: flex;flex-direction: column;bottom: 20px;left: 16px;width: 400rpx;">
						<view style="display: flex;flex-direction: row;align-items: center;">
							<text class="normal-text"
								style="color:white;font-size: 17px;font-weight: 500;">{{item.startRoute}}</text>
							<view style="width: 20px;height: 20px; margin: 0 8px 0 8px;">
								<image style="width: 20px;height: 20px;"
									src="../../static/icon-goTo.png"></image>
							</view>
							
							<text class="normal-text"
								style="color:white;font-size: 17px;font-weight: 500;">{{item.endRoute}}</text>
						</view>
						<text class="normal-text"
							style="color: #ACACAC;font-size: 17px;font-weight: 500;">{{setDistanceText(item.distance)}}</text>
					</view>

					<view
						style="position: absolute;display: flex;flex-direction: column;bottom: 20px;right: 16px;align-items: flex-end;">
						<text class="normal-text"
							style="color: #ACACAC;font-size: 17px;font-weight: 500;">{{item.playCount}}人游玩过</text>
						<button class="list-play-btn">游玩路线</button>
						<image style="position: absolute;height: 19px;width: 15px;bottom: 3px;left: 12px;"
							src="../../static/app-logo.png"></image>
					</view>

				</uni-swiper-dot>
				<view
					style="display: flex;align-items:center;color: #7B7B7B;margin-top: 8rpx;flex-direction: row-reverse;padding-right: 12px;">
					<text>{{setNumberText(item.commentCount)}}</text>
					<image style="height: 20px;width: 20px;margin-left: 12px;margin-right: 2px;"
						src="/static/page-home-icon-comment.png"></image>
					<text>{{setNumberText(item.collectCount)}}</text>
					<image style="height: 20px;width: 20px;margin-left: 12px;margin-right: 2px;"
						src="/static/page-home-icon-search-collect.png"></image>
					<text>{{setNumberText(item.loveCount)}}</text>
					<image style="height: 20px;width: 20px;margin-left: 12px;margin-right: 2px;"
						src="/static/page-home-icon-like.png"></image>
				</view>

				<text class="list-content-text">
					{{item.title}}
				</text>
			</view>

		</z-paging>
		<!-- 推荐列表 -->

	</view>



</template>

<script>
	// #ifdef APP-PLUS
	const dom = weex.requireModule('dom');
	// #endif

	import QQMapSdk from '../../common/qqmap-wx-jssdk.js'
	import {
		getPostList
	} from '../../api/posts.js';

	var qqmapsdk;

	export default {
		data() {
			return {
				searchData:{},
			
				dataList: [],


				current: 0,
				swiperCurrent: 0,
				dotsStyles: { //轮播图下表点样式
					bottom: 0,
					width: 4,
					height: 4,
					border: 'rgba(209, 209, 209, 1.0)',
					backgroundColor: 'rgba(209, 209, 209, 1.0)',
					selectedBorder: '0px',
					selectedBackgroundColor: 'rgba(0, 114, 237, 1.0) '
				},
				swiperDotIndex: 0,
				backToTopImg: '/static/page-home-icon-back-to-top.png', //回到顶部按钮图标
				backToTopStyle: { //回到顶部按钮图标样式
					height: '100rpx',
					width: '100rpx',
				},
				headBarInfo: {
					navBarHeight: 0, // 导航栏高度
					menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）
					menuTop: 0, // 胶囊距顶部间距
					menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）
					headBarContentHeight: 0, //用来装载内容的盒子高度
					headBarContentRight: 0, //胶囊占据 的空间
				},

			}
		},
		created() {
			for (var i = 1; i <= this.datanum; i++) {
				this.dataList.push({
					id: i,
					name: i
				});
			}
		},
		onLoad(options) {
			let {
				resData
			} = options
			resData = JSON.parse(decodeURIComponent(resData))
			this.searchData = resData
			console.log("准备查找地点：",this.searchData)
			
			// 获取系统信息
			const systemInfo = wx.getSystemInfoSync();
			// 胶囊按钮位置信息
			const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
			// 导航栏高度 = 状态栏高度 + 44
			this.headBarInfo.navBarHeight = systemInfo.statusBarHeight + 44;
			this.headBarInfo.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
			this.headBarInfo.menuTop = menuButtonInfo.top;
			this.headBarInfo.menuHeight = menuButtonInfo.height;
			this.headBarInfo.headBarContentHeight = (this.headBarInfo.navBarHeight - this.headBarInfo.menuHeight - this
				.headBarInfo.menuTop) * 2 + this.headBarInfo.menuHeight;
			this.headBarInfo.headBarContentRight = menuButtonInfo.width + this.headBarInfo.menuRight * 2;


			// this.getLocation()
		},

		methods: {
			change(e) {
				this.swiperCurrent = e.detail.current
			},

			queryList(pageNo, pageSize) {
				// 此处请求仅为演示，请替换为自己项目中的请求
				// this.$request.queryList({
				// 	pageNo,
				// 	pageSize
				// }).then(res => {
				// 	// 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
				// 	// this.$refs.paging.complete(res.data.list);

				// }).catch(res => {
				// 	// 如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
				// 	// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
				// 	// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
				// 	this.$refs.paging.complete(false);
				// })
				console.log("开始查找地点：",this.searchData)
				const data = {
					criteria:'推荐',
					searchCoordinates: {
						latitude: this.searchData.latitude,
						longitude: this.searchData.longitude,
						// name: this.searchData.name
					},
					pageNo: pageNo,
					pageSize: pageSize,
				}

				getPostList(data).then(res => {
					console.log("请求成功:", res)
					
					this.$refs.paging.complete(res.data)
				}).catch(err => {
					console.log("请求失败:", err)
					this.$refs.paging.complete(false)
				});

			},
			openLocationPicker() {

				uni.chooseLocation({
					success: (res) => {

					console.log("准备查找地点：",res)
					this.searchData = res
					this.$refs.paging.reload()
					},
					fail: (err) => {
						console.log('选择地址失败:', err);
					}
				});

			},

			clickToDetails(item) {
				console.log("查看页面详情", item)
				uni.navigateTo({
					url: "/packageMixture/pages/postDetails/postDetails?postId=" + item.id
				})
			},
			navigateTosearch() {

			},

			setNumberText(count) {
				if (count > 99) {
					return '99+';
				} else {
					return count;
				}
			},
			setDistanceText(distance) {
				if (distance > 1000) {
					var distanceString = (distance / 1000).toFixed(1)

					return '约' + distanceString + '公里'
				} else {
					return '约' + distance + '米'
				}
			},
			backClick(){
				uni.navigateBack()
			}
		}
	}
</script>

<style>
	/* #ifndef APP-PLUS */
	page {
		width: 100%;
		min-height: 100%;
		display: flex;
		background-color: white;
	}

	/* #endif */

	.page {
		position: relative;
		flex: 1;
		overflow-y: scroll;
		overflow: hidden;
		padding-top: 10%;

	}

	.header {
		top: 0px;
		/* height: 95px; */
		position: fixed;
		z-index: 2;
		width: 100%;
		background-color: white;
		display: flex;
		flex-direction: column-reverse;
	}

	.head-bar-content-box {
		position: relative;
		bottom: 0px;
		background-color: #fff;
		align-items: center;
		display: flex;
		/* justify-content: space-between; */
	}



	.input-search {
		height: 32px;
		margin-left: 12px;
		background-color: white;
		font-size: 12px;
		font-style: normal;
		font-weight: 300;
		width: auto;
		height: auto;
		border-radius: 12px;
		padding: 4px 12px 4px 12px;
		border: 1px solid #E5E5E5;
		width: 60%;
	}

	.head-text {
		color: white;
		max-width: 52%;
		display: -webkit-box;
		text-overflow: ellipsis;
		overflow: hidden;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.tab-box {
		width: 100%;
		background-color: white;
		height: auto;
		padding-top: 10%;
		margin-top: 20px;
		top: 110px;
		position: fixed;
		z-index: 1;
		font-weight: 700
	}

	.tab-content-scroll {
		/* margin-top: 166px; */
	}

	.list-head-box {
		width: 100%;
		display: flex;
		align-items: center;
		padding-left: 12px;
		padding-left: 12px;
		margin-top: 12px;
		margin-bottom: 12px;
	}

	.list-title-text {
		color: #181818;
		text-align: center;
		font-family: "PingFang SC";
		font-size: 17px;
		max-width: 60%;
		padding-left: 3%;
		padding-right: 3%;
		font-weight: 400;
		display: -webkit-box;
		text-overflow: ellipsis;
		overflow: hidden;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.list-focus-btn {
		min-width: 60px;
		height: 28px;
		font-size: 14px;
		font-weight: 100;
		align-items: center;
		background-color: #1670f1;
		color: #fff;
		border-radius: 20px;
		position: absolute;
		right: 12px;
		display: flex
	}

	.list-play-btn {
		border-radius: 50%;
		color: #FFF;
		background-color: #2F6EF5;
		font-size: 17px;
		width: 115px;
		height: 28px;
		flex-shrink: 0;

		align-items: center;
		border-radius: 20px;
		display: flex;
		justify-content: flex-end;

	}

	.list-content-text {
		color: #181818;
		margin: 12px;
		font-size: 17px;
		font-style: normal;
		font-weight: 400;
		display: -webkit-box;
		text-overflow: ellipsis;
		overflow: hidden;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
</style>